<template>
  <el-row style="width: 100%">
    <el-col :span="20">
      <span> {{ treeNode.name }} </span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <el-col :span="12"> {{ treeNode.manager }} </el-col>
        <el-col :span="12">
          <el-dropdown @command="doClick">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="addClick">添加子部门</el-dropdown-item>
              <el-dropdown-item command="editClick" v-if="!isRoot">
                编辑部门
              </el-dropdown-item>
              <el-dropdown-item command="delClick" v-if="!isRoot">
                删除部门
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
import { delDepartments } from "@/api/departments";
export default {
  props: {
    //   定义一个props属性
    treeNode: {
      type: Object, // 对象类型
      required: true, // 要求对方使用您的组件的时候 必须传treeNode属性 如果不传 就会报错
    },
    isRoot: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    doClick(command) {
      switch (command) {
        case "addClick":
          this.$emit("addDepts", this.treeNode.id);
          break;
        case "editClick":
          this.$emit("editDepts", this.treeNode.id);
          break;
        case "delClick":
          this.$confirm(`确定要删除${this.treeNode.name}吗`, "温馨提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              await delDepartments(this.treeNode.id);
              this.$message.success(`${this.treeNode.name}删除成功!`);
              this.$emit("delDepts");
            })
            .catch(() => {
              this.$message.info("已取消删除");
            });
          break;
      }
    },
  },
};
</script>
<style>
</style>